<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业</title>
    <style>
        .box {
            width: 410px;
            margin: auto;
            display: grid;
            grid-template-columns: auto auto;
        }

        img {
            width: 100px;
            height: 100px;
            cursor: pointer;


        }

        img:hover {
            box-shadow: 3px 3px 2px 2px gray;
        }

        p {
            font-size: 14px;
        }

        h2 {
            text-align: center;
        }

        span {
            color: orange;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- <h2>{{ title }}</h2> -->
        <list-cpn @add="add"></list-cpn>
    </div>
    <script src="./vue.js"></script>
    <template id="list">
        <div>
            <h2> 你选择的是{{ title }}</h2>
            <div class="box">

                <div v-for="(item,index) in listData" @click="show(index)">
                    <img :src="listData[index].img" alt="">
                    <p>{{listData[index].name }}</p>
                    <span>{{listData[index].money}}</span>
                </div>

            </div>

        </div>

    </template>

    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    title: ''
                }
            },
            methods: {
                add(val) {
                    this.title = val

                }
            },
            components: {

                'list-cpn': {
                    template: '#list',
                    data() {
                        return {
                            listData: [{
                                    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/4885bda69e45b870a5bcf5bbaea1548b.jpg',
                                    name: '小米头戴耳机',
                                    money: '￥999元'
                                },
                                {
                                    img: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/70e30a90120626588b8ec6b96173776f.png',
                                    name: 'RedmiBook Pro15 锐龙版',
                                    money: '￥6866元'
                                },
                                {
                                    img: '	https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640682255.71145810.png',
                                    name: '小米15proMax 粉紫色',
                                    money: '￥5266元'
                                },
                                {
                                    img: ' 	https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png',
                                    name: 'Xiaomi Mix 4',
                                    money: '￥5986元'
                                },

                                {
                                    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640682255.67579080.png',
                                    name: '小米11 酷炫黑',
                                    money: '￥5866元'
                                },

                                {
                                    img: ' https://t15.baidu.com/it/u=1086792973,3095820513&fm=224&app=112&f=JPEG?w=500&h=500',
                                    name: '小米X 铂金款',
                                    money: '￥5998元'
                                },
                                {
                                    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/c12fd1da9fed662842d6f5c57d7737c9.png ',
                                    name: '小米投影仪',
                                    money: '￥8666元'
                                },
                                {
                                    img: ' 	https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/50180b158690a40f9cbc684c7646d297.jpg',
                                    name: '小米平衡车',
                                    money: '￥6899元'
                                },





                            ],
                            title: ''
                        }
                    },

                    methods: {
                        show(i) {
                            this.title = this.listData[i].name
                            this.$emit('add', this.title)

                        }
                    }
                }
            }
        })
    </script>

</body>

</html>